<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.place_name" class="search-input" clearable placeholder="请输入场所名称"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.place_type" class="search-input" clearable placeholder="请输入场所类别"/>
                </FormItem>
                <!--<FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入联系人姓名"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.mobile" class="search-input" clearable placeholder="请输入联系电话"/>
                </FormItem>-->
                <FormItem>
                    <Input v-model="searchObj.area" class="search-input" clearable placeholder="请输入区、县（市）"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.street" class="search-input" clearable placeholder="请输入街道"/>
                </FormItem>
                <!--<FormItem>
                    <Input v-model="searchObj.place_address" class="search-input" clearable placeholder="请输入详细地址"/>
                </FormItem>-->
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <!--<FormItem>
                    <Button class="search-btn" type="error" @click="delSelect">
                        <Icon type="ios-remove"/>
                        批量删除
                    </Button>
                </FormItem>-->
            </Form>
            <Divider/>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addAction">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="importExcel">
                        <Icon type="ios-cloud-upload-outline"/>
                        数据导入
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row type="flex" justify="center">
            <Col span="24">
                <Table border :loading="tableLoading" :columns="tableColumns" :data="tableData"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row, index }">
                        <!--<Button v-if="row.is_open === '1'" type="warning" size="small" class="action-btn" @click="stateBtn(row.article_id, 'stop')">停用</Button>
                        <Button v-if="row.is_open === '0'" type="success" size="small" class="action-btn" @click="stateBtn(row.article_id, 'start')">启用</Button>-->
                        <Button type="warning" size="small" class="action-btn"
                                @click="bindAction(row)">绑定人员
                        </Button>
                        <Button type="success" size="small" class="action-btn"
                                @click="qrcodeAction(row, index)">下载二维码
                        </Button>
                        <Button type="primary" size="small" class="action-btn" @click="editAction(row)">编辑修改</Button>
                        <Button type="info" size="small" class="action-btn" @click="infoAction(row)">查看详情</Button>
                        <Button type="error" size="small" class="action-btn" @click="delAction(row.id)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo"/>
        </Row>
        <br>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :modalWidth="modalWidth" :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  updatePlaceURL,
  getPeopleList,
  deletePlace
  // userStrToQrcode
  // getPlaceCount
} from '@/api/pass'
import OptionModal from './components/option-modal'

export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      modalData: {},
      tableColumns: [
        {
          // type: 'selection',
          type: 'index',
          title: '序号',
          width: 70,
          // fixed: 'left',
          align: 'center'
        },
        {
          title: '场所名称',
          key: 'place_name',
          tooltip: true,
          width: 300,
          align: 'center'
        },
        // {
        //   title: '区域',
        //   key: 'area',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '街道',
        //   key: 'street',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '详细地址',
        //   key: 'place_address',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '经度',
        //   key: 'lat',
        //   width: 100,
        //   align: 'center'
        // },
        // {
        //   title: '纬度',
        //   key: 'lan',
        //   width: 100,
        //   align: 'center'
        // },
        {
          title: '联系人姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          width: 150,
          tooltip: true,
          key: 'mobile',
          align: 'center'
        },
        // {
        //   title: '二维码地址',
        //   width: 150,
        //   key: 'qr_code',
        //   tooltip: true,
        //   align: 'center'
        // },
        // {
        //   title: '批次',
        //   width: 150,
        //   key: 'batch',
        //   align: 'center'
        // },
        // {
        //   title: '场所类别',
        //   width: 150,
        //   tooltip: true,
        //   key: 'place_type',
        //   align: 'center'
        // },
        {
          title: '操作',
          minWidth: 350,
          // fixed: 'right',
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      searchObj: {}
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  computed: {
    company_code () {
      return this.$store.state.user.severUserInfo.data.company_code
    }
  },
  methods: {
    importExcel () {
      this.$router.push({
        name: 'placeExcel',
        query: { type: 'place' }
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 20
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        place_name: this.$common.xeUtils.trim(this.searchObj.place_name),
        name: this.$common.xeUtils.trim(this.searchObj.name),
        mobile: this.$common.xeUtils.trim(this.searchObj.mobile),
        area: this.$common.xeUtils.trim(this.searchObj.area),
        street: this.$common.xeUtils.trim(this.searchObj.street),
        // place_address: this.$common.xeUtils.trim(this.searchObj.place_address),
        place_type: this.$common.xeUtils.trim(this.searchObj.place_type)
      }
      let param = data || obj
      this.tableLoading = true
      getPeopleList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    addAction () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalWidth = 650
      this.modalData = {}
      this.modalShow = true
    },
    editAction (val) {
      this.modalTitle = '编辑修改'
      this.modalType = 'edit'
      this.modalWidth = 650
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    infoAction (val) {
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalData = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.getBindList(val)
      this.modalShow = true
    },
    delAction (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    // 修改二维码字段
    updatePlaceURLAction (val, url, index) {
      updatePlaceURL({ id: val.id, qr_code: url }).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          val.qr_code = url
          window.location.href = url
        } else {
          this.error(data)
        }
      })
    },
    // 绑定人员
    bindAction (val) {
      this.modalTitle = '绑定人员'
      this.modalType = 'bind'
      this.modalWidth = 650
      this.modalData = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.getBindList(val)
      this.modalShow = true
    },
    // 二维码
    qrcodeAction (row, index) {
      if (row.qr_code) {
        console.log('二维码地址', row.qr_code)
        let codeArr = row.qr_code.split(',')
        // let url = 'http://sstpw.tripln.top/wl/userStrToQrcode?name=' + row.id + '&encryption=' + row.verification_code + '&downName=' + row.place_name
        if (this.company_code === 'LA00014') {
          const url = codeArr[0]
          // url = url + '&type=2'
          // alert(url)
          // this.updatePlaceURLAction(row, url, index)
          window.location.href = url
        } else {
          this.modalTitle = '选择二维码进行下载'
          this.modalType = 'qrcode'
          // this.modalData = { url: url = url + '&type=' }
          this.modalData = { url: codeArr }
          this.modalShow = true
        }
      } else {
        this.$Message.error('二维码信息为空！')
      }
    },
    stateBtn (val, state) {
      let title = '提示'
      let content = ''
      let param = '0'
      if (state === 'start') {
        content = '确认启用么?'
        param = '1'
      } else if (state === 'stop') {
        content = '确认停用么?'
        param = '0'
      }
      this.$Modal.confirm({
        title: title,
        content: content,
        loading: true,
        onOk: () => {
          this.changeState(val, param)
        }
      })
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item) => {
        ids.push(item.id)
      })
      this.$Modal.confirm({
        title: '确认删除选中信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          this.delMulti(ids)
        }
      })
    },
    deleteOne (val) {
      deletePlace({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    delMulti (ids) {
      // deleteArticlePl({ id: ids }).then(ret => {
      //   const data = ret.data
      //   if (data.errcode === 0) {
      //     this.$Modal.remove()
      //     this.init()
      //     this.success('删除成功')
      //   } else {
      //     this.$Modal.remove()
      //     this.error(data)
      //   }
      // })
    },
    changeState (id, state) {
      // updateIsopen({ article_id: id, is_open: state }).then(ret => {
      //   const data = ret.data
      //   if (data.errcode === 0) {
      //     this.$Modal.remove()
      //     this.init()
      //     this.success('操作成功')
      //   } else {
      //     this.$Modal.remove()
      //     this.error(data)
      //   }
      // })
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }
</style>
